<script setup lang="ts">
import mumuMusic from './components/mumu-music/index.vue';
import { activityDetailApi, checkDrawEligibleApi, getCodeDetail, userDrawResidueCountApi } from "@/api/lucky"
const code = ref('');
const drawResidueCount = ref(0)
async function handleConfirm() {
  const codeDetail = await getCodeDetail({ code: code.value })
  const activity = await activityDetailApi({ activityId: codeDetail.activityId })

  const luckyPath = activity.draw.path
  // 跳转前检测是否可以抽奖
  await checkDrawEligibleApi({ activityId: codeDetail.activityId, code: code.value })
  uni.navigateTo({
    url: luckyPath + "?activityId=" + activity.activity.id + '&code=' + code.value,
  });
}

function toOrderListPage() {
  uni.navigateTo({
    url: '/pages/orderList/index',
  });
}


</script>

<template>
  <view class="wrapper">
    <view class="pwd-container">
      <view class="title">
        <text>
          请输入刮卡密码
        </text>
      </view>
      <view class="pwd">
        <view class="pwd-input">
          <uni-easyinput v-model="code" type="text" placeholder="" />
        </view>
      </view>
      <view class="btn">
        <button type="primary" @click="handleConfirm">
          提交
        </button>
      </view>
    </view>
  </view>
  <view class="my-order" @click="toOrderListPage">
    <view class="my-order-box">
      <text>我的订单</text>
    </view>
  </view>
  <mumuMusic music-src="https://stream.556600.com/R/zu_hai-hao_yun_lai815.mp3" />
</template>

<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* 垂直排列子元素 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  background: url('./static/bg01.jpg');
  background-size: cover;

  /* 确保背景图片覆盖整个容器 */
  .pwd-container {
    background-color: #fae2be;
    border-radius: 20rpx;
    padding: 40rpx;
    box-shadow: 5rpx 5rpx 10rpx #fdf6cc;

    .title {
      font-size: 30rpx;
      text-align: center;
      margin-bottom: 20rpx;
    }

    .pwd {
      margin-bottom: 20rpx;
    }
  }
}

.my-order {
  position: relative;
  bottom: 200rpx;

  .my-order-box {
    width: 200rpx;
    background-color: #fae2be;
    border-top-right-radius: 40rpx;
    border-bottom-right-radius: 40rpx;
    padding: 20rpx;
  }
}
</style>
